// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.artist {
  @_top: artist;

  &__admin-note {
    background-color: @osu-colour-h2;
    color: black;
    font-weight: bold;
    padding: 20px;
    margin-bottom: 10px;

    text-align: center;

    @media @desktop {
      .default-box-shadow();
    }
  }

  &__badge-wrapper {
    position: absolute;
    top: 10px;
    right: 10px;
    pointer-events: none;
  }

  &__box {
    margin: 10px;
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;

    &--hidden {
      opacity: 0.25;
    }
  }

  &__description {
    .default-gutter-v2();
    background-color: @osu-colour-b5;
    font-size: 14px;
    padding-top: 20px;
    padding-bottom: 20px;
    .default-box-shadow();

    @media @desktop {
      margin-bottom: 10px;
    }

    > h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: white;
    }

    &--index {
      @media @desktop {
        margin-bottom: 0;
      }
    }
  }

  &__index {
    background-color: @osu-colour-b4;
    padding: 10px;
    .default-box-shadow();
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: hidden;
  }

  &__label-overlay {
    width: 64px;
    height: 64px;
    background-size: cover;
    bottom: 0;
    right: 0;
    position: absolute;
    border-radius: 4px 0 3px 0;
    .at2x-simple-var(--artist-label-overlay);
  }

  &__links-area {
    margin: 0 auto 10px auto;
    width: 270px;
    padding: 10px;

    @media @desktop {
      .default-box-shadow();
      background: @osu-colour-b5;
    }

    &--albums {
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;

      @media @mobile {
        display: none;
      }
    }
  }

  &__name {
    white-space: nowrap;
    color: @osu-colour-l1;
    font-size: @font-size--title-small-3;
    font-weight: bold;
    margin-top: 5px;
    display: block;
    &:hover {
      color: white;
    }
  }

  &__portrait {
    .at2x-fallback(--artist-portrait, "~@images/layout/artist-noavatar.jpg");
    width: 250px;
    height: 250px;
    .default-box-shadow();
    .default-border-radius();
    background-size: cover;
    background-position: center;
    display: block;

    margin: 10px auto;
    position: relative;

    @media @desktop {
      margin-top: -113px; // approximately aligned to inside of title bar
    }

    &--index {
      width: 200px;
      height: 200px;
      margin: 0;
      @media @desktop {
        margin: 0;
      }
    }

    &--new {
      box-shadow: 25px -10px 50px hsla(var(--hsl-orange-1), 0.2);
    }
  }

  &__portrait-wrapper {
    width: 200px;
    height: 200px;
    position: relative;
  }

  &__track-count {
    color: @osu-colour-f1;
    font-size: 12px;
    text-align: center;
  }

  &__video {
    margin-top: 20px;
    aspect-ratio: 16 / 9;
    width: 100%;
    border-radius: @border-radius-large;
    overflow: hidden;
  }

  &__white-link {
    .link-white();
    .link-plain();
  }
}
